//	水波图自定义指标

import React, { useState } from 'react';
import { InputNumber, Switch } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';
import Editor from './Editor';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

interface customColorType {
	item: string;
	color: string;
}

const LiquidCustomQuota = ( props: IProps ) => {
	let { config, form, onValuesChange } = props;
	const [ isShowLiquidLabel, setShowLiquidLabel ] = useState( ( config.style && config.style.isShowLiquidLabel === false ) ? false : true );
	const [ isShowLiquidValue, setShowLiquidValue ] = useState( ( config.style && config.style.isShowLiquidValue  === false ) ? false : true );
	const [ liquidValueFixed, setLiquidValueFixed ] = useState( ( config.style && config.style.liquidValueFixed ) || 2 );
	const [ isShowLiquidPercent, setShowLiquidPercent ] = useState( ( config.style && config.style.isShowLiquidPercent === false ) ? false : true );
	const fontConfig = [
		'fontFamily', 'fontSize', 'fontColor', 'fontBold', 'fontItalic'
	];
	const onChange = ( checked: boolean ) => {
		setShowLiquidLabel( checked );
		form.setFieldsValue( { isShowLiquidLabel: checked } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const handleValueChange = ( checked ) => {
		setShowLiquidValue( checked );
		form.setFieldsValue( { isShowLiquidValue: checked } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const handleLiquidValueFixedChange = ( value ) => {
		setLiquidValueFixed( value );
		form.setFieldsValue( { liquidValueFixed: value } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const handleLiquidPercentChange = ( checked ) => {
		setShowLiquidPercent( checked );
		form.setFieldsValue( { isShowLiquidPercent: checked } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	return (
		<div>
			<FormItem label="名称是否显示" name="isShowLiquidLabel" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch checked={ isShowLiquidLabel } onChange={ onChange }/>
			</FormItem>

			{
				isShowLiquidLabel && (

					<FormItem label="指标字体" name="labelFont" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
						<Editor
							config={ config }
							form={ form }
							onValuesChange={ onValuesChange }
							fontFamilyName="labelFontFamily"
							fontSizeName="labelFontSize"
							fontColorName="labelFontColor"
							boldName="labelFontBold"
							italicName="labelFontItalic"
							fontConfig={ fontConfig }
						/>
					</FormItem>
				)
			}

			<FormItem label="值是否显示" name="isShowLiquidValue" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch checked={ isShowLiquidValue } onChange={ handleValueChange }/>
			</FormItem>
			{
				isShowLiquidValue && (

					<FormItem label="值字体" name="liquidValueFont" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
						<Editor
							config={ config }
							form={ form }
							onValuesChange={ onValuesChange }
							fontFamilyName="liquidValueFontFamily"
							fontSizeName="liquidValueFontSize"
							fontColorName="liquidValueFontColor"
							boldName="liquidValueFontBold"
							italicName="liquidValueFontItalic"
							fontConfig={ fontConfig }
						/>
					</FormItem>
				)
			}

			<FormItem label="小数位数" initialValue={ liquidValueFixed } name="liquidValueFixed" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputNumber value={ liquidValueFixed } min={0} placeholder="默认是2" onChange={ handleLiquidValueFixedChange }/>
			</FormItem>

			<FormItem label="是否显示%" name="isShowLiquidPercent" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch checked={ isShowLiquidPercent } onChange={ handleLiquidPercentChange }/>
			</FormItem>
		</div>
	);
};

export default React.memo( LiquidCustomQuota );
